<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "../../dashboard/mixins/resize";
import { delData } from '@/api/system/dict/data';
var colorTypeArr = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(185, 150, 248, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(185, 150, 248, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(3, 194, 236, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(3, 194, 236, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(218, 57, 20, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(218, 57, 20, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(232, 190, 49, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(232, 190, 49, 0.8)'
      }
    ]
  }
];
export default {
  name: 'lineCom',
  mixins: [resize],
  props: {
    colorNumber: {
      type: Number,
      default: 1,
    },
    className: {
      type: String,
      default: "chart-dom",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Object,
      default: () => { }
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.chartData);
    },
    setOptions(data) {
      this.chart.setOption({
        // backgroundColor: 'rgb(22,177,224,0.1)',
        legend: {
          data: this.dealData.data.map(item => item.name),
          orient: 'horizontal',   // 水平
          top: '10%',
          right: '0%',
          textStyle: {
            fontSize: this.fontSize(14),
            color: '#4ca9ff',
          }
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '0%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#56a4cd',
            },
          },
          splitArea: {
            show: false,
            color: '#f00',
          },
          axisLabel: {
            color: '#fff',
          },
          splitLine: {
            show: false,
          },
          axisTick: {       //y轴刻度线
            show: false
          },
          data: this.chartData.sj,
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#56a4cd',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#d1e6eb',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,254,210,0.1)',
              },
            },
          },
        ],
        series: this.dealSeriesData()
      });
    },
    dealSeriesData() {
      console.log(this.dealData)
      let data = []
      let seriesItem = {
        name: '',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: true,
        symbol: 'circle',
        lineStyle: {
          normal: {
            color: '#00ca95',
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#00ca95',
          },
        },

        itemStyle: {
          color: '#00ca95',
          borderColor: '#fff',
          borderWidth: 3,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0,202,149,0.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,202,149,0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0,202,149, 0.9)',
            shadowBlur: 20,
          },
        },
        data: [],
      }
      this.dealData.data.forEach(item => {
        seriesItem.name = item.name;
        seriesItem.data = item.data;
        data.push(seriesItem);
      })
      console.log('data', data)
      return data;
    },
    fontSize(fontsize) {
      let clientWidth = Math.max(document.documentElement.clientWidth, 1366);
      return (clientWidth * fontsize) / 1920;
    },
  },
  computed: {
    dealData() {
      let { chartData } = this;
      let data = {};
      data.data = [];
      Object.keys(chartData).forEach(key => {
        if(key == 'sj') {
          data[key] = chartData[key]
        } else {
          Object.keys(chartData['data']).forEach(skey => {
            data.data.push({ name: skey, data: chartData['data'][skey] })
          })
        }
      })
      return data;
    }
  },
  watch: {
    chartData: {
      handler(val, old) {
        if (String(val) !== "{}") {
          this.$nextTick(() => {
            console.log(this.dealData)
            this.initChart();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>

<style></style>